Print

1.  Expanding the Menu

Now the menu will be further extended. It will acquire the ability to expand automatically when clicked.

That is, when you click a link on the menu, the next page will show the menu expanded to the selected Item.  

If you want to make a menu like that, the first thing to do is to ensure that  the menu has a fixed DataSource. Otherwise, it will always show the current Item.

 

For example:   

<ctl:menuex runat="server" datasource="/sitecore/content/home"/>

 

This will show the child Items of the Home Item.  

Assume the following content structure:  

• sitecore
• • content
  • • home
    • • News
      • • Press
        • • Press release 1
          • Press release 2
        • Corporate
        • • Newsletter 1
          • Newsletter 2
      • Archives
      • • Document 1
        • Document 2

When the menu appears initially, it should show the following list of links:

 

News

Archives

 

When you click News, the following links will appear:

 

News

  Press

  Corporate

Archives

 

When you click Press, the following links will appear:

  

News

  Press

    Press release 1

    Press release 2

  Corporate

Archives

 

When you click Press release 1, the menu should remain the same. 

When you click Archives, the following list should appear:

 

News

Archives

  Document 1

  Document 2

 

The logic governing expansion is as follows:  

1.       If a menu Item represents the same Item as the current Item (Sitecore.Context.Item), it should be expanded.

2.       If a menu Item represents an Item that is an ancestor of the current Item (Sitecore.Context.Item), it should be expanded.

1.1.  Full Source for Menu_part2

using System.Web.UI;

namespace Articles.API.Webcontrols
...{
  /**//// <summary>
  /// Read about this web control in the article 
  /// "Building web controls – part 3" on the
  /// sdn.sitecore.net web site. 
  /// 
  /// Reference Sitecore.Kernel, System.Web, System
  /// </summary>
  public class Menu_part2 : Sitecore.Web.UI.WebControl
  ...{
    Variables#region Variables

    // Property variables
    string m_indent = "";
    string m_linkStyle = "";
    string m_selectedStyle = "";

    #endregion

    Properties#region Properties

    [Sitecore.Web.UI.WebControlProperty]
    [System.ComponentModel.Description("Indenting for all children per level.;")]
    public string Indent
    ...{
      get ...{ return m_indent; }
      set ...{ m_indent = value; }
    }

    [Sitecore.Web.UI.WebControlProperty]
    [System.ComponentModel.Description("Style for links, e.g. font-weight:bold;font-color:red;")]
    public string LinkStyle
    ...{
      get ...{ return m_linkStyle; }
      set ...{ m_linkStyle = value; }
    }

    [Sitecore.Web.UI.WebControlProperty]
    [System.ComponentModel.Description("Style selected item, e.g. font-weight:bold;font-color:yellow;")]
    public string SelectedStyle
    ...{
      get ...{ return m_selectedStyle; }
      set ...{ m_selectedStyle = value; }
    }

    #endregion

    Protected methods#region Protected methods

    // DoRender executed with late binding
    protected override void DoRender(HtmlTextWriter output)
    ...{
      Sitecore.Data.Items.Item rootItem = this.GetItem();

      if (rootItem != null)
      ...{
        RenderSubItems(output, rootItem, 0);
      }
    }

    #endregion

    Private methods#region Private methods

    void RenderLink(HtmlTextWriter output, Sitecore.Data.Items.Item item)
    ...{
      string url = item.Paths.GetFriendlyUrl();
      string style = LinkStyle;

      if (SelectedStyle.Length > 0 &&
        item.ID == Sitecore.Context.Item.ID)
      ...{
        style = SelectedStyle;
      }

      output.AddAttribute(HtmlTextWriterAttribute.Href, url);
      output.AddAttribute(HtmlTextWriterAttribute.Style, style);
      output.RenderBeginTag(HtmlTextWriterTag.A);
      output.Write(item.DisplayName);
      output.RenderEndTag();
    }


    void RenderSubItems(HtmlTextWriter output,
                        Sitecore.Data.Items.Item item, int level)
    ...{
      // get collection of childs of the current item
      Sitecore.Collections.ChildList children =
        item.Children;

      foreach (Sitecore.Data.Items.Item child in children)
      ...{
        if (level > 0)
        ...{
          output.AddStyleAttribute("padding-left", Indent);
        }
        output.RenderBeginTag(HtmlTextWriterTag.Div);

        RenderLink(output, child);

        Sitecore.Data.Items.Item current =
          Sitecore.Context.Item;

        if (child.ID == current.ID ||
          child.Paths.IsAncestorOf(current))
        ...{
          RenderSubItems(output, child, level + 1);
        }

        output.RenderEndTag();
      }
    }

    #endregion
  }
}

2.  IsAncestorOf and Context.Item

The interesting part here is the check performed immediately before the recursive call. First, we use the context class to get the current Item. The current Item is the context Item from which the web page is rendered. For instance, if the current Item points to the Home Item, the web engine will render the layout associated with the Home Item.  

We only want to continue drawing children of the child Item in case the current Item is lower in the hierarchy. The child.Paths.IsAncestorOf method returns true if this is so.

 

2.1.  Codesnippet

Sitecore.Data.Items.Item current =
  Sitecore.Context.Item;

if (child.ID == current.ID ||
  child.Paths.IsAncestorOf(current))
{
  RenderSubItems(output, child, level + 1);
}

3.  Using Menu_part2

Note that a new property (Indent) has been added to control indenting of different levels of expansion. A property for highlighting a currently selected Item has also been added (SelectedStyle).

 

Below is an example of the Menu_part2 usage.

 

3.1.  Menu_part2 in aspx or ascx

<%@ Control Language="c#" AutoEventWireup="true" 
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register TagPrefix="ctl"
Namespace="Articles.API.Webcontrols" Assembly="BetAndWin" %>


<ctl:Menu_part2 runat="server" 
  datasource="/sitecore/content/home" 
  LinkStyle="font-weight:normal;color:blue;"
  selectedstyle="font-weight:bold;color:blue;" 
  Indent="10"/>